<template>
	<navigatorComp title="留言" bgcColor="#121512" fontColor="#fff"></navigatorComp>
	<mescroll-uni :height="height + 'px'" :up="upOption" @init="mescrollInit" @down="myDownCallback" @up="upCallback">
		<view class="messList">
			<view class="messItem" v-for="(item, index) in messList">
				<view class="messItem_title">
					{{item.nickname}}
					<u-icon name="trash" size="22" color="#fff" style="margin-right: -10rpx; margin-left: 20rpx"
						@click="showDel(item)"></u-icon>
				</view>
				<view class="messItem_content">{{item.message}}</view>
				<view class="messItem_time">
					<!-- {{item.dateTimeStr}} -->
					{{ formatTimestamp(item.dateTimeStr) }}
					<view class="messItem_like display_flex">
						<u-icon v-if="item.whetherLike==0||item.whetherLike==2" @click="setLike(item)" name="heart"
							color="#fff" size="23"></u-icon>
						<u-icon v-else @click="setLike(item)" name="heart-fill" color="rgb(237,85,100)"
							size="23"></u-icon>
						{{item.likeNumber}}
					</view>
				</view>
			</view>
		</view>
	</mescroll-uni>

	<!-- 删除确认框 -->
	<myModel v-model:show="showDelModel" title="是否确认删除？" content="" @confirm="del"></myModel>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import navigatorComp from '/components/navigator/index.vue';
	import myModel from '/components/model/index.vue';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import _ from "lodash"
	import MineApi from '@/API/mine/index.js';
	import HomeApi from '@/API/home/index.js';
	import { formatTimestamp } from '@/utils/time.js';
	
	const mineApi = new MineApi();
	const homeApi = new HomeApi();
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(); // 调用mescroll的hook
	const upOption = {
		page: {
			size: 10 // 每页数据的数量
		},
		noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
		// empty: {
		// 	use: false //不显示空图
		// }
	};
	const lastId = ref(0); //最后一个元素的id
	const height = ref(0);
	const messList = ref([]);
	const currentId = ref('');
	const showItem = ref({});
	const showDelModel = ref(false);

	onLoad(() => {
		// #ifdef MP-WEIXIN
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight;
		// #endif

		// #ifdef APP || H5
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight -
			uni.upx2px(88);
		// #endif
	});

	onShow(() => {
		// myDownCallback();
	});
	const showDel = (item) => {
		showDelModel.value = true
		showItem.value = item
	}
	const setLike = _.throttle(function(item) {
		if (item.whetherLike == 1) {
			item.whetherLike = 0
			homeApi.likeMessageBoardApi({
				messageId: item.messageId,
				opType: 2
			}).then((res) => {
				item.likeNumber--
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}).catch(() => {})
		} else {
			item.whetherLike = 1
			homeApi.likeMessageBoardApi({
				messageId: item.messageId,
				opType: 1
			}).then((res) => {
				item.likeNumber++
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}).catch(() => {})
		}
	}, 1000);
	const del = (item) => {
		homeApi.deleteMessageBoardApi({
			belongingTo: showItem.value.belongingTo,
			messageId: showItem.value.messageId,
			correspondingId: 0
		}).then((res) => {
			lastId.value = 0
			downCallback();
			uni.showToast({
				icon: 'none',
				title: '删除成功'
			})
			showDelModel.value = false
		}).catch(() => {})
	}
	/**
	 * 上拉加载
	 */
	const upCallback = (mescroll) => {
		homeApi.getMessageBoardListApi({
				belongingTo: 4,
				correspondingId: 0,
				latestId: lastId.value
			})
			.then((res) => {
				const curPageData = res.data.messageBoardList || []; // 当前页数据
				if (lastId.value === 0) messList.value = []; //如果是第一页需手动制空列表
				curPageData.forEach((item) => {
					item.dateTimeStr = removeTimezone(item.dateTimeStr) || timeFormat(item.dateTimeStr,
						'yyyy-mm-dd hh:MM:ss');
				})
				messList.value = messList.value.concat(curPageData); //追加新数据\
				if (curPageData.length > 0) {
					lastId.value = curPageData[curPageData.length - 1].messageId;
				}
				mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
			})
			.catch(() => {
				mescroll.endErr(); // 请求失败, 结束加载
			});
	};

	const myDownCallback = (mescroll) => {
		lastId.value = 0;
		downCallback();
	};

	function removeTimezone(dateString) {
		const parts = dateString.split(' ');
		const result = parts.slice(0, 2).join(' ');
		return result;
	}
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.messList {
		margin: 24rpx 32rpx;

		.messItem {
			width: 100%;
			// height: 186rpx;
			background: #292b2a;
			border-radius: 8rpx;
			padding: 24rpx 24rpx 24rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;

			.messItem_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
				line-height: 35rpx;
				margin-bottom: 16rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.messItem_content {
				font-weight: 400;
				font-size: 26rpx;
				color: #ffffff;
				line-height: 30rpx;
				margin-bottom: 24rpx;
				text-align: justify;
			}

			.messItem_time {
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
				line-height: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.messItem_like {
				font-weight: 400;
				font-size: 26rpx;
				color: #c5c5c5;
				line-height: 30rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
</style>